<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" th:href="${#request.getContextPath()}+'/static/layui/css/layui.css'" media="all">
    <link rel="stylesheet" type="text/css" th:href="${#request.getContextPath()}+'/static/css/normalize.css'"/>
    <link rel="stylesheet" type="text/css" th:href="${#request.getContextPath()}+'/static/css/loginCss.css'"/>
    <base th:href="${#request.getContextPath()}">
    <style type="text/css">
    </style>
    </base>
</head>
<body>
<div class="login-top">
    <p>
        <span>安亭养老</span>
        <em>欢迎登录</em>
    </p>
</div>
<div class="login-box">
    <section class="login-left">
        <ul>
            <li>安亭智慧养老一网统管平台</li>
            <li>
                <p>
                    <span><img th:src="@{/static/img/login_01.png}"></span>
                    <span>老人档案</span>
                </p>
                <p>
                    <span><img th:src="@{/static/img/login_02.png}"></span>
                    <span>供餐服务</span>
                </p>
                <p>
                    <span><img th:src="@{/static/img/login_03.png}"></span>
                    <span>便民服务</span>
                </p>
                <p>
                    <span><img th:src="@{/static/img/login_04.png}"></span>
                    <span>养老机构</span>
                </p>
                <p>
                    <span><img th:src="@{/static/img/login_05.png}"></span>
                    <span>数据看板</span>
                </p>
            </li>
        </ul>
    </section>
    <section class="login">
        <h1 class="fb">用户登录</h1>
        <form action="" method="post" class="layui-form">
            <ul class="relative">
                <li class="textCenter" id="msg" style="display:none;">
                    <p>
                        <img th:src="@{/static/img/dl_mmcw.png}">
                        <span>用户名或密码错误，请重新输入</span>
                    </p>
                </li>
                <li>
                    <p>
                        <span><img th:src="@{/static/img/login_yhm.png}"></span>
                        <input id="userName" onblur="clearText(this)" placeholder="请输入用户名" />
                        <em><img th:src="@{/static/img/close.png}" style="display: none"></em>
                    </p>
                </li>
                <li>
                    <p>
                        <span><img th:src="@{/static/img/login_mm.png}"></span>
                        <input id="passWord" onblur="clearText(this)" type="password" placeholder="请输入登录密码" />
                        <em><img th:src="@{/static/img/close.png}" style="display: none"></em>
                    </p>
                </li>
            </ul>
            <div class="overflow" pane="">
                <p class="left">
                    <input type="checkbox"  id="isRemember" name="like1[write]" lay-skin="primary" title="记住账号">
                </p>
                <p class="right" style="cursor: pointer" onclick="identity()">忘记密码</p>
            </div>
        </form>
        <div class="login-btn mt10px"><span id="loginButton" style="cursor: pointer" class="block textCenter white border-radius5 lh50px f18px">登&nbsp;&nbsp;录</span></div>
    </section>
</div>
<script th:src="${#request.getContextPath()}+'/static/js/jquery-2.1.3.min.js'" charset="utf-8"></script>
<script th:src="${#request.getContextPath()}+'/static/layui/layui.js'" charset="utf-8"></script>
<script th:inline="javascript">var basePath = [[${#httpServletRequest.getContextPath()}]];</script>
<script th:inline="javascript">
    $(function (e) {
         layui.use(['form'], function() {
             //监听指定开关
            $("form").on('switch(switchTest)', function(data) {
                layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), {
                    offset: '6px'
                });
            });
         });

         //监听键盘Enter键
        document.onkeydown = function (e) {
            var theEvent = window.event || e;
            var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
            if (code == 13) {
                login();
            }
        }

        //登陆点击
        $("span#loginButton").on("click",function (e) {
            login();
        })

        //如果之前用户操作了记住账号
        remeberInfoSet();
    })

    /**
     * 监听文字输入。有文字时，显示清除文字图片，点击清除文字；无文字时，隐藏清除文字图片
     */
    function clearText(obj){
        var text = $(obj).val();
        if(isNotNull(text)){
            $(obj).parent().find("img").show();
            $(obj).parent().find("em").unbind().click(function(){
                $(this).parent().find("input").val('');
                $(this).find("img").hide();
            });
        }else{
            $(obj).parent().find("em").find("img").hide();
        }
    }

    /**
     * 登陆
     */
    function login() {
        var loginName = $("input#userName").val();
        var passWord = $("input#passWord").val();
        var flag = true;
        if(!loginName){

            flag = false;
            msg('登录账号不能为空！');
        }else if(!passWord){
            flag = false;
            msg('登录密码不能为空！');
        }
        if(flag) {
            $("#msg").hide();
            $.ajax({
                url: basePath + "/authentication",
                type: "post",
                dataType: "json",
                data: {"loginName": loginName, "password": passWord},
                success: function (result) {
                    if (result.code == "200" || result.code == 200) {
                        var value = $('#isRemember').prop('checked');
                        var storage = window.localStorage;
                        if(value==true){
                            //存储localStorage 用户名，密码
                            storage['loginName']=loginName;
                            storage['passWord']=passWord;
                            storage['isRemember']=1;
                            window.top.location.href = basePath + "/index";
                        }else{
                            storage['loginName']='';
                            storage['passWord']='';
                            storage['isRemember']=0;
                            window.top.location.href = basePath + "/index";
                        }
                    }else{
                        msg(result.msg);
                    }
                }
            })
        }
    }

    /**
     * 验证不为空
     */
    function isNotNull(val) {
        return val!=null&&val!=''&&typeof val!='undefined';
    }

    /**
     * 显示提示信息
     */
    function msg(text){
        $("#msg").find('span').html(text);
        $("#msg").show();
    }

    /**
     * 记住账号
     */
    function remeberInfoSet(){
        var storage = window.localStorage;
        var loginName = storage['loginName'];
        var passWord = storage['passWord'];
        var isRemember = storage['isRemember'];
        if(isNotNull(loginName)){
            $("input#userName").val(loginName);
        }
        if(isNotNull(passWord)){
            $("input#passWord").val(passWord);
        }
        $("#isRemember").prop("checked",isRemember==1?true:false);
    }

    /**
     * 跳到身份验证
     */
    function identity(){
        window.location.href=basePath+"/identity";
    }
</script>
</body>
</html>


